<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>中国地图初始化</title>
	<style>
		*{margin: 0;padding: 0;}
		body{
			text-align: center;
			background-color: #ecf0f1;
		}
		#main{
			position: relative;
			margin: 0 auto;
			width: 1400px;
			height: 1800px;
			background-image: url("../static/img/background.jpg");
			background-size: 100% auto;
		}
		#title{
			padding-top: 30px;
			color: white;
			letter-spacing: 15px;
			font-weight: bolder;
			font-size: 30px;
		}
    	#clearnData{
			position: absolute;
			top: 100px;
			left: 200px;
			width: 1000px;
			height: 1300px;
			border: 1px solid white;
			border-radius: 5px;
		}
		#clearnTitle{
			color: white;
			position: absolute;
			top: 50px;
			left: 540px;
		}
		#tableData{
			margin-top: 10px;
			margin-left: 10px;
			width: 980px;
			height: 300px;
			overflow: auto;
			border-top: 1px solid white;
			border-bottom: 1px solid white;
		}
		#SQL{
			margin-top: 10px;
			margin-left: 10px;
			width: 980px;
			height: 170px;

		}
		table{
			border-collapse: collapse;
		}
		td{
			font-size: 18px;
			font-weight: bold;
			color: white;
			width: 150px;
			line-height: 30px;
			text-align: center;
			border: 1px solid white;
		}
		textarea {
			resize: none;
		}
		#subSQL{
			width: 200px;
			border-radius: 5px;
			font-size: 18px;
			font-weight: bold;
			color: white;
			height: 50px;
			background-color: #678678;
			cursor:pointer;
		}
		#sqlText,#dataText{
			font-size: 18px;
			border-radius: 5px;
		}
		#resultDataHor,#resultDataVer{
			position: absolute;
			bottom: 360px;
			width: 980px;
			height: 300px;
			border:1px solid white;
			margin-top: 10px;
			margin-left: 10px;
			overflow: auto;
		}
		#inputData{
			position: absolute;
			bottom: 100px;
			width: 980px;
			height: 200px;
			margin-top: 10px;
			margin-left: 10px;
		}
		#view{
			position: absolute;
			left: 400px;
			bottom: 20px;
			width: 200px;
			border-radius: 5px;
			font-size: 18px;
			font-weight: bold;
			color: white;
			height: 50px;
			background-color: #678678;
			cursor:pointer;
		}
		#resultTitle{
			color: white;
			text-align: center;
			padding-top: 100px;
		}
		#inputTitle{
			position: absolute;
			bottom: 310px;
			left: 430px;
			color:white;
		}
		#XY{
			position: absolute;
			bottom:670px;
			right: 50px;
			width: 150px;
			border-radius: 5px;
			font-size: 18px;
			font-weight: bold;
			color: white;
			height: 40px;
			background-color: #678678;
			cursor:pointer;
		}
		.curr{
			display: block;
		}
		.none{
			display: none;
		}
</style>
</head>

<body>
<div id="main">
    <h1 id="title">查询并写入数据</h1>
	<div id="clearnData">
	<div id="tableData">
		<table>
		{% for row in data %}
			<tr>
			{% for item in row %}
				<td>{{item|safe}}</td>
			{% endfor %}
			</tr>
		{% endfor %}
		</table>
	</div>
	<div id="SQL">
		<textarea rows="10" cols="90" resize="none" placeholder="写SQL语句，表名为“myTable”" id="sqlText"></textarea>
		<br>
		<button id="subSQL">提交查询</button>
	</div>
	<h1 id="resultTitle">查询结果</h1>
	<button id="XY">XY轴转换</button>
	<div id="resultDataHor" class="curr">
		<table id="resultHor">
		</table>
	</div>
	<div id="resultDataVer" class="none">
		<table id="resultVer">
		</table>
	</div>
	<h1 id="inputTitle">写入数据</h1>
	<form action="/viewMap" method="POST">
	<div id="inputData">
		<textarea rows="10" cols="90" resize="none" name="data" placeholder='北京	25968
天津	32338
北京	16776
天津	32338
上海	31066
重庆	32435
台湾	32435
香港	23008
澳门	115167
河北	207833
河南	194449
黑龙江	77994
吉林	52351
辽宁	119303
山东	299773
内蒙古	100199
江苏	479320
安徽	206953
山西	136138
陕西	110049
甘肃	139990
浙江	401918
江西	143660
湖北	156144
湖南	174518
贵州	81302
四川	269854
云南	153936
新疆	97296
宁夏	34083
青海	29979
西藏	49951
广西	183955
广东	380375
福建	185431' id="dataText"></textarea>
	</div>
	<button id="view">生成图像</button>
	</form>
	</div>
	
</div>
</body>
<script src="../static/js/jquery.js"></script>
<script type="text/javascript">
	$("#subSQL").click(function(){
		$.ajax({
			url: "/sqlExecute",
			data: {
				sql:$("#sqlText").val()
			},
			type: 'POST',
			dataType: 'JSON', 
			beforeSend: function () {
                $('#subSQL').text("查询中");
            },
		}).done(function(data){
			var str1 = ""
			for(var i = 0;i < data.resultHor.length;i++){
				str1 += "<tr>"
				for(var j = 0; j < data.resultHor[i].length; j++){
					str1 += "<td>"+data.resultHor[i][j]+"</td>"
				}
				str1 += "<tr>"
			}
			$("#resultHor").html(str1)
			var str2 = ""
			for(var i = 0;i < data.resultVer.length;i++){
				str2 += "<tr>"
				for(var j = 0; j < data.resultVer[i].length; j++){
					str2 += "<td>"+data.resultVer[i][j]+"</td>"
				}
				str2 += "<tr>"
			}
			$("#resultVer").html(str2)
			$('#subSQL').text("提交查询");
		})
	})
	$("#XY").click(function(){
		var hor = $("#resultDataHor");
		var ver = $("#resultDataVer");
		if(hor.hasClass("curr")){
			hor.attr("class","none");
			ver.attr("class","curr");
		}else{
			hor.attr("class","curr");
			ver.attr("class","none");
		}
		
	});
	$(document).ready(function(){
 		$("#dataText").text("北京	25968"+"\n"+"天津	32338"+"\n"+"北京	16776"+"\n"+"天津	32338"+"\n"+"上海	31066"+"\n"+"重庆	32435"+"\n"+"台湾	32435"+"\n"+"香港	23008"+"\n"+"澳门	115167"+"\n"+"河北	207833"+"\n"+"河南	194449"+"\n"+"黑龙江	77994"+"\n"+"吉林	52351"+"\n"+"辽宁	119303"+"\n"+"山东	299773"+"\n"+"内蒙古	100199"+"\n"+"江苏	479320"+"\n"+"安徽	206953"+"\n"+"山西	136138"+"\n"+"陕西	110049"+"\n"+"甘肃	139990"+"\n"+"浙江	401918"+"\n"+"江西	143660"+"\n"+"湖北	156144"+"\n"+"湖南	174518"+"\n"+"贵州	81302"+"\n"+"四川	269854"+"\n"+"云南	153936"+"\n"+"新疆	97296"+"\n"+"宁夏	34083"+"\n"+"青海	29979"+"\n"+"西藏	49951"+"\n"+"广西	183955"+"\n"+"广东	380375"+"\n"+"福建	185431");
	});
	//使文本域有缩进功能
	$("#dataText").keydown(function(e){
        if (e.keyCode == 9) {
	        e.preventDefault();
	        var indent = '    ';
	        var start = this.selectionStart;
	        var end = this.selectionEnd;
	        var selected = window.getSelection().toString();
	        selected = indent + selected.replace(/\n/g, '\n' + indent);
	        this.value = this.value.substring(0, start) + selected
	                + this.value.substring(end);
	        this.setSelectionRange(start + indent.length, start
	                + selected.length);
	    }

	});
</script>
</html>`